package admin

import (
	"github.com/go-fuego/fuego/examples/full-app-gourmet/store"
	"github.com/go-fuego/fuego/examples/full-app-gourmet/store/types"
	"github.com/go-fuego/fuego/examples/full-app-gourmet/templa/components"
)

templ IngredientList(ingredients []store.Ingredient, parameters components.SearchParams) {
	@htmlPage("Ingredients", true) {
		<hgroup class="flex justify-between items-baseline">
			<h1>Ingredients</h1>
			<a
				href={ templ.URL("/admin/ingredients/create") }
				hx-boost="true"
				hx-target="#page"
				hx-select="#page"
				hx-swap="outerHTML"
				class="btn btn-primary"
			>
				New Ingredient
			</a>
		</hgroup>
		@components.SearchBox(parameters)
		<div class="border rounded border-zinc-100 dark:border-zinc-700 shadow p-4 md:p-8">
			<table class="table ">
				<thead>
					<tr>
						<th class="border-b border-zinc-100 dark:border-zinc-700 p-4 pr-8 text-zinc-700 dark:text-zinc-300">Name</th>
						<th class="border-b border-zinc-100 dark:border-zinc-700 p-4 pr-8 text-zinc-700 dark:text-zinc-300">Category</th>
						<th class="border-b border-zinc-100 dark:border-zinc-700 p-4 pr-8 text-zinc-700 dark:text-zinc-300">Description</th>
						<th class="border-b border-zinc-100 dark:border-zinc-700 p-4 pr-8 text-zinc-700 dark:text-zinc-300">Default Unit</th>
						<th class="border-b border-zinc-100 dark:border-zinc-700 p-4 pr-8 text-zinc-700 dark:text-zinc-300">Available</th>
					</tr>
				</thead>
				<tbody>
					for _, ingredient := range ingredients {
						<tr>
							<td class="border-b border-zinc-100 dark:border-zinc-700 p-4 pr-8 text-zinc-700 dark:text-zinc-300">
								<a
									href={ templ.URL("/admin/ingredients/" + ingredient.ID) }
									hx-boost="true"
									hx-target="#page"
									hx-select="#page"
									hx-swap="outerHTML"
									class="hover:text-blue-500"
								>
									<strong class="font-semibold">{ ingredient.Name }</strong>
								</a>
							</td>
							<td class="border-b border-zinc-100 dark:border-zinc-700 p-4 pr-8 text-zinc-700 dark:text-zinc-300">{ types.CategoriesTranslations[ingredient.Category][types.LocaleEmoji] +" "+ types.CategoriesTranslations[ingredient.Category][types.Locale(parameters.Lang)] }</td>
							<td class="border-b border-zinc-100 dark:border-zinc-700 p-4 pr-8 text-zinc-700 dark:text-zinc-300">{ ingredient.Description }</td>
							<td class="border-b border-zinc-100 dark:border-zinc-700 p-4 pr-8 text-zinc-700 dark:text-zinc-300">{ string(ingredient.DefaultUnit) }</td>
							<td class="border-b border-zinc-100 dark:border-zinc-700 p-4 pr-8 text-zinc-700 dark:text-zinc-300">
								if ingredient.AvailableAllYear {
									<span class="text-green-500">All year</span>
								} else {
									<span class="">{ ingredient.Months() }</span>
								}
							</td>
						</tr>
					}
				</tbody>
			</table>
		</div>
	}
}
